<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- :value="username" @currentInput="handleInput" -->
        <hminput
          v-model.trim="user.username"
          placeholder="请输入用户名"
          :rule="/^1\d{10}$|^1\d{4}$/"
        ></hminput>
        <hminput
          v-model.trim="user.password"
          placeholder="请输入用密码"
          :rule="/^.{3,16}$/"
        ></hminput>
        <hminput
          v-model.trim="user.nickname"
          placeholder="请再次输入用密码"
        ></hminput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/login" class="">去登录</a>
      </p>
      <hmbutton type="success" @click="register">注册</hmbutton>
    </div>
  </div>
</template>

<script>
import hmbutton from "@/components/hmbutton.vue";
import hminput from "../components/hminput.vue";
import { getUserRegister } from "../apis/user.js";
import { Toast } from "vant";
export default {
  components: {
    hmbutton,
    hminput,
  },
  data() {
    return {
      user: {
        username: "13000999888",
        password: "123456",
        nickname: "",
      },
    };
  },
  methods: {
    register() {
      console.log(this.user);
      if (
        /^1\d{10}$|^1\d{4}$/.test(this.user.username) &&
        /^.{3,16}$/.test(this.user.password)
      ) {
        getUserRegister(this.user)
          .then((res) => {
            console.log(res.data.message);
            if (res.data.message == "注册成功") {
              this.$toast.success("注册成功");
            }
          })
          .catch((err) => {
            console.log(err);
            if (res.data.message == "用户名已经存在") {
              Toast("用户名已经存在");
            } else {
              Toast("账号或者密码不规则，请重新输入");
            }
          });
      }
    },
  },
};
</script>
<style lang='less' scoped>
.container {
  padding: 20px;

  .close {
    span {
      font-size: 27 / 360 * 100vw;
    }
  }
  .logo {
    display: flex;
    justify-content: center;

    span {
      display: block;
      font-size: 126 / 360 * 100vw;
      color: #d81e06;
    }
  }
  .inputs {
    input {
      margin-bottom: 20px;
    }
  }
  .tips {
    text-align: right;
    margin-bottom: 20px;
    a {
      color: #3385ff;
    }
  }
}
</style>
